<script setup lang="ts">
interface Props {
    type?: number
    options: Array<{ label: string, value: string, [key: string]: any }>
    active: Ref<string, string>
    callbackFn: (active: string) => void
}

withDefaults(defineProps<Props>(), {
    type: 1,
})

const emit = defineEmits(['update:active'])


</script>

<template>
    <div class="flex flex-col">
        <div v-for="item in options" class="flex justify-between items-center px-2 h-10 rounded-[6px]"
            :class="{ active: (active as unknown as string) === item.value }" @click="callbackFn(item.value)">
            <div>{{ item.label }}</div>
            <div v-if=" (active as unknown as string) === item.value"
                class="bg-[#24EE89] w-5 h-5 rounded-full flex justify-center items-center">
                <span class="bg-[#000] w-[50%] h-[50%] rounded-full"></span>
            </div>
            <div v-else class="w-5 h-5 rounded-full border border-[#605e5e]"></div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.active {
    background-color: #323738;
}
</style>
